<template>
  <div class="echartsDiv">
    <div class="titleDiv clearFloat">
      <div class="lf lineDiv"></div>
      <p class="lf titleP">各类用户统计</p>
      <div class="rf">
        <p class="lf labelP">选择时间：</p>
        <div class="lf">
          <a-range-picker
            :defaultValue="[$util.moment(searchParams.bgTm),$util.moment(searchParams.endTm)]"
            :format="$defaultSettings.dateFormat"
            @change="onChange"/>
        </div>
        <a-button type="primary" class="lf" @click="getList" :loading="loading">
          查询
        </a-button>
      </div>
    </div>
    <div class="contentDiv clearFloat">
      <div class="leftTable">
        <a-table :columns="columns" :data-source="data" bordered>
          <a slot="ph" slot-scope="text">{{ text }}</a>
          <!--<template slot="img" slot-scope="img">-->
            <!--<img style="width:60px;heigth:60px;border-radius:50%;" :src="img" />-->
          <!--</template>-->
        </a-table>
      </div>

    </div>
  </div>
</template>

<script>
/* eslint-disable */
import moment from 'moment'
import {queryAllKindsUser} from '@/api/system/user'
const columns = [
  {
    title: '账号类型',
    dataIndex: 'accountType',
    key: 'accountType',
    ellipsis: true,
  },
  {
    title: '账号个数',
    dataIndex: 'accountCount',
    key: 'accountCount',
    ellipsis: true,
  },
  {
    title: '视频播放时长',
    dataIndex: 'playTime',
    key: 'playTime',
    ellipsis: true,
  },
  {
    title: '获取总积分',
    dataIndex: 'totalIntegral',
    key: 'totalIntegral',
    ellipsis: true,
  },
  {
    title: '已学学时',
    dataIndex: 'totalHour',
    key: 'totalHour',
    ellipsis: true,
  },
  {
    title: '平均学时',
    dataIndex: 'avgHour',
    key: 'avgHour',
    ellipsis: true,
  },
  {
    title: '考试次数',
    dataIndex: 'examCount',
    key: 'examCount',
    ellipsis: true,
  },
  {
    title: '考试合格率',
    dataIndex: 'examPercent',
    key: 'examPercent',
    ellipsis: true,
  },
];

const data = [
  {
    name: '重点排污企业',
    number: '24个',
    totalTime: "24小时",
    playNum:23,
    classHour: '50/92',
    averageHour: 30,
    numRate: 12,
    passRate: '90%'
  },
  {
    name: '其他企业',
    number: '24个',
    totalTime: "24小时",
    playNum:23,
    classHour: '50/92',
    averageHour: 30,
    numRate: 12,
    passRate: '90%'
  },
  {
    name: '个人用户',
    number: '24个',
    totalTime: "24小时",
    playNum:23,
    classHour: 50,
    averageHour: 30,
    numRate: 12,
    passRate: '90%'
  },
  {
    name: '系统员工',
    number: '24个',
    totalTime: "24小时",
    playNum:23,
    classHour: 50,
    averageHour: 30,
    numRate: 12,
    passRate: '90%'
  }
];
  export default {
    name: 'viewRank',
    data(){
      return{
        /*   -------搜索框--------*/
        searchParams: {
          bgTm: moment(new Date()).subtract(6, 'days').format('YYYY-MM-DD'),
          endTm: this.$defaultSettings.endTm,
        },
        /*   -------分页--------*/
//        pagination: this.$defaultSettings.pagination ,
        data,
        columns,
        loading: false
      }
    },
    mounted() {
      this.getList()
    },
    methods:{
      getList() {
          this.loading = true
          var params = {
            "_search": false,
            "bgTm": "",
            "data": this.searchParams,
            "endTm": "",
            "pageNumber": '',
            "pageSize": ''
          }
        queryAllKindsUser(params).then(res=> {
          this.loading = false
          if(res.code==200) {
              this.data = res.data.records
          }
        })
      },
      onChange(dates, dateStrings) {
        this.searchParams.bgTm = dateStrings[0];
        this.searchParams.endTm = dateStrings[1];
      }
    },
  }
</script>

<style lang="less" scoped>
  .lf{
    float:left;
  }
  .rf{
    float:right;
  }
  .clearFloat:after{
    content:"";
    display:block;
    clear:both;
  }

  .echartsDiv{
    width:100%;
    height:100%;
    .titleDiv{
      width:100%;
      height:60px;
      padding:0 30px;
      box-sizing: border-box;
      border-bottom:1px solid #E5E5E5;
      p{
        margin:0;
      }
      .lineDiv{
        width: 4px;
        height: 24px;
        background: #4496E2;
        margin:18px 20px 0 0;
      }
      .titleP{
        font-size: 20px;
        font-weight: bold;
        color: #333333;
        line-height:60px;
      }
      .labelP{
        font-size: 18px;
        font-weight: 400;
        color: #000000;
        margin-right:18px;
        line-height:60px;
      }
      /deep/ .ant-input{
        height:40px;
        margin-top:10px;
      }
      /deep/ .ant-btn{
        width: 100px;
        height: 40px;
        background: #4496E2;
        box-shadow: 1px 6px 12px 0 rgba(68, 150, 226, 0.2);
        border-radius: 4px;
        font-size: 16px;
        margin:10px 0 0 16px;
      }
    }
    .contentDiv{
      width:100%;
      height:calc( 100% - 60px );
      padding-left:30px;
      padding-right:30px;
      box-sizing: border-box;
      .leftTable{
        width:100%;
        height:100%;
        margin-top:30px;
        /deep/ .ant-table-tbody > tr > td {
          padding: 5px 16px !important;
        }
        /deep/ .ant-table-content{
          margin-bottom:20px;
        }
        /deep/ tbody tr {
          height: 65px;
        }
      }
      .showCharts{
        width:507px;
        height:50%;
      }
    }
  }
</style>